<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易严选盒子布局练习</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        a{
            text-decoration: none;
            color: #333;
        }
        .container{
            background-color: #ffffff;
            margin-top: 20px;
            margin-left: 20px;
            border: 1px solid transparent;
            box-sizing: border-box;
        }
        .all{
            width: 265px;
            height: 361px;
            margin-right: 15px;
            display: inline-block;
            text-align: center;

        }
        .jieshao{
            background-color: #e36844;
            color: #ffffff;
            padding: 3px;
            font-size: 13px;
            text-align: center;
        }
        .preview {
            color: #333;
            /* margin-top: 20px; */
            padding: 0 30px;
            text-align: center;
            font-size: 16px;
        }
        .preview2{
            color: #333;
            margin-top: 20px;
            padding: 0 30px;
            text-align: center;
            font-size: 16px;
        }
        .nowPrice{
            display: inline-block;
            /* width: 100%; */
            text-align: center;
            color: #d4282d;
            font-size: 13px;
        }
        .oldPrice{
            display: inline-block;
            /* width: 100%; */
            text-decoration:line-through;
            font-size: 12px;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="all">
            <a href="https://you.163.com/item/detail?id=3527154&_stat_referer=index&_stat_area=mod_1_item_1"><img src="./img1.jpg" alt=""></a>
            <p class="preview2">
                <a href="https://you.163.com/item/detail?id=3527154&_stat_area=mod_1_item_1&_stat_referer=index">15分钟快速救脸，射频多功能美容仪</a>
            </p>
            <span class="nowPrice">￥899</span>
        </div>
        <div class="all">
            <a href="https://you.163.com/item/detail?id=3527154&_stat_referer=index&_stat_area=mod_1_item_1"><img src="./img2.jpg" alt=""></a>
            <span class="jieshao">品类狂欢</span>
            <p class="preview">
                <a href="https://you.163.com/item/detail?id=3527154&_stat_area=mod_1_item_1&_stat_referer=index">洗去一天疲惫 越南增压节水柔肤花洒</a>
            </p>
            <p class="price">
                <span class="nowPrice">￥79</span> <span class="oldPrice">￥89</span>
            </p>
        </div>
        <div class="all">
            <a href="https://you.163.com/item/detail?id=3527154&_stat_referer=index&_stat_area=mod_1_item_1"><img src="./img3.jpg" alt=""></a>
            <p class="preview2">
                <a href="https://you.163.com/item/detail?id=3527154&_stat_area=mod_1_item_1&_stat_referer=index">27卷整箱装 谷风一木3层卷纸180g</a>
            </p>
            <span class="nowPrice">￥75.9</span>
        </div>
        <div class="all">
            <a href="https://you.163.com/item/detail?id=3527154&_stat_referer=index&_stat_area=mod_1_item_1"><img src="./img4.jpg" alt=""></a>
            <span class="jieshao">每满99减20券</span>
            <p class="preview">
                <a href="https://you.163.com/item/detail?id=3527154&_stat_area=mod_1_item_1&_stat_referer=index">纤纤玉足是一种享受 电动丝柔修足机</a>
            </p>
            <span class="nowPrice">￥59</span>
        </div>
    </div>
</body>
</html>